<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card class="card">
          <div slot="header"><b><i class="el-icon-odometer"></i> 页头页脚文案</b></div>
          <div class="el-row">
            <b>页头文案</b><p/>
            <el-input 
            ref="headerContentInput"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 9999}"
            v-model="htmlcontent.headerContent">
            </el-input><p/>
            <el-button 
              ref="headerContentUpdateBtn" 
              type="success" 
              plain 
              icon="el-icon-edit" 
              size="mini" 
              @click="handleUpdateHeaderContent">保存</el-button>
          </div>
          <el-row :gutter="10">
            <el-col :span="6">
              <b>页头链接图标</b>
            </el-col>
            <el-col :span="18">
              <headerIconImg :htmlcontent="htmlcontent" />
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <b>banner图</b>
            </el-col>
            <el-col :span="24">
              <bannerImg :htmlcontent="htmlcontent" />
            </el-col>
          </el-row>
          <div class="el-row">
            <b>页脚LOGO下方文案</b><p/>
            <el-input 
            ref="footerLogoContent"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 9999}"
            v-model="htmlcontent.footerLogoContent">
            </el-input><p/>
            <el-button 
              ref="footerLogoContentUpdateBtn" 
              type="success" 
              plain 
              icon="el-icon-edit" 
              size="mini" 
              @click="handleUpdateFooterLogoContent">保存</el-button>
          </div>
          <div class="el-row">
            <b>页脚联系方式下方文案</b><p/>
            <el-input 
            ref="footerContactContentInput"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 9999}"
            v-model="htmlcontent.footerContactContent">
            </el-input><p/>
            <el-button 
              ref="footerContactContentUpdateBtn" 
              type="success" 
              plain 
              icon="el-icon-edit" 
              size="mini" 
              @click="handleUpdateFooterContactContent">保存</el-button>
          </div>        
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="card">
          <div slot="header"><b><i class="el-icon-odometer"></i> 首页文案</b></div>
          <div class="el-row">
            <b>产品介绍文案</b><p/>
            <el-input 
            ref="indexProductContentInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-model="htmlcontent.indexProductContent">
            </el-input><p/>
            <el-button 
              ref="indexProductContentUpdateBtn" 
              type="success" 
              plain 
              icon="el-icon-edit" 
              size="mini" 
              @click="handleUpdateIndexProductContent">保存</el-button>
          </div>
          <div class="el-row">
            <b>新闻介绍文案</b><p/>
            <el-input 
            ref="indexNewsContentInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-model="htmlcontent.indexNewsContent">
            </el-input><p/>
            <el-button 
              ref="indexNewsContentUpdateBtn" 
              type="success" 
              plain 
              icon="el-icon-edit" 
              size="mini" 
              @click="handleUpdateIndexNewsContent">保存</el-button>
          </div>
          <div class="el-row">
            <b>解决方案介绍文案</b><p/>
            <el-input 
            ref="indexSolutionContentInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-model="htmlcontent.indexSolutionContent">
            </el-input><p/>
            <el-button 
              ref="indexSolutionContentUpdateBtn" 
              type="success" 
              plain 
              icon="el-icon-edit" 
              size="mini" 
              @click="handleUpdateIndexSolutionContent">保存</el-button>
          </div>
          <div class="el-row">
            <b>项目视频介绍文案</b><p/>
            <el-input 
            ref="indexVideoContentInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-model="htmlcontent.indexVideoContent">
            </el-input><p/>
            <el-button 
              ref="indexVideoContentUpdateBtn" 
              type="success" 
              plain 
              icon="el-icon-edit" 
              size="mini" 
              @click="handleUpdateIndexVideoContent">保存</el-button>
          </div>

          <div class="el-row">
            <b>售前服务文案</b><p/>
            <el-input 
            ref="saleService1TitleInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-if="htmlcontent.saleServices"
            v-model="htmlcontent.saleServices[0].title">
            </el-input><p/>
            <el-input 
            ref="saleService1ContentInput"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9999}"
            v-if="htmlcontent.saleServices"
            v-model="htmlcontent.saleServices[0].content">
            </el-input>
          </div>
          <div class="el-row">
            <b>售中服务文案</b><p/>
            <el-input 
            ref="saleService2TitleInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-if="htmlcontent.saleServices"
            v-model="htmlcontent.saleServices[1].title">
            </el-input><p/>
            <el-input 
            ref="saleService2ContentInput"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9999}"
            v-if="htmlcontent.saleServices"
            v-model="htmlcontent.advantages[1].content">
            </el-input>
          </div>
          <div class="el-row">
            <b>售后服务文案</b><p/>
            <el-input 
            ref="saleService3TitleInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-if="htmlcontent.saleServices"
            v-model="htmlcontent.saleServices[2].title">
            </el-input><p/>
            <el-input 
            ref="saleService3ContentInput"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9999}"
            v-if="htmlcontent.saleServices"
            v-model="htmlcontent.saleServices[2].content">
            </el-input>
          </div>


          <el-row :gutter="10">
            <el-col :span="24">
              <b>首页banner图</b>
            </el-col>
            <el-col :span="24">
              <indexBannerImg :htmlcontent="htmlcontent" @saveBanner="refreshHtmlContent" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card :bordered="false" class="card">
          <div slot="header"><b><i class="el-icon-odometer"></i> 公司优势</b></div>
          <div class="el-row">
            <b>优势一</b><p/>
            <el-input 
            ref="advantage1TitleInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[0].title">
            </el-input><p/>
            <el-input 
            ref="advantage1ContentInput"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[0].content">
            </el-input>
          </div>
          <div class="el-row">
            <b>优势二</b><p/>
            <el-input 
            ref="advantage2TitleInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[1].title">
            </el-input><p/>
            <el-input 
            ref="advantage2ContentInput"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[1].content">
            </el-input>
          </div>
          <div class="el-row">
            <b>优势三</b><p/>
            <el-input 
            ref="advantage3TitleInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[2].title">
            </el-input><p/>
            <el-input 
            ref="advantage3ContentInput"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[2].content">
            </el-input>
          </div>
          <div class="el-row">
            <b>优势四</b><p/>
            <el-input 
            ref="advantage4TitleInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[3].title">
            </el-input><p/>
            <el-input 
            ref="advantage4ContentInput"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[3].content">
            </el-input>
          </div>
          <div class="el-row">
            <b>优势五</b><p/>
            <el-input 
            ref="advantage5TitleInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[4].title">
            </el-input><p/>
            <el-input 
            ref="advantage5ContentInput"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[4].content">
            </el-input>
          </div>
          <div class="el-row">
            <b>优势六</b><p/>
            <el-input 
            ref="advantage6TitleInput"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[5].title">
            </el-input><p/>
            <el-input
            ref="advantage6ContentInput"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 9999}"
            v-if="htmlcontent.advantages"
            v-model="htmlcontent.advantages[5].content">
            </el-input>
          </div>
          <el-button 
              ref="advantagesUpdateBtn" 
              type="success" 
              plain 
              icon="el-icon-edit" 
              size="mini" 
              @click="handleUpdateAdvantages">保存</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getHtmlContent, updateHtmlContent } from "@/api/content/html";
import { getToken } from "@/utils/auth";

export default {
  name: "HtmlContent",
  components: { 
    headerIconImg: () => import('./headerIcon'),
    indexBannerImg: () => import('./indexBanners'),
    bannerImg: () => import('./banner'),
  },
  data() {
    return {
      htmlcontent: {},
    }
  },

  created() {
    this.getData();
  },    

  methods: {
    getData() {
      getHtmlContent().then(response => {
        this.htmlcontent = response.data;
      });
    },
    handleUpdateHeaderContent() {
      updateHtmlContent({'headerContent':this.htmlcontent.headerContent}).then(() => {
        this.$modal.msgSuccess('修改成功');
      }).catch(() => {});
    },
    handleUpdateFooterLogoContent() {
      updateHtmlContent({'footerLogoContent':this.htmlcontent.footerLogoContent}).then(() => {
        this.$modal.msgSuccess('修改成功');
      }).catch(() => {});
    },
    handleUpdateFooterContactContent() {
      updateHtmlContent({'footerContactContent':this.htmlcontent.footerContactContent}).then(() => {
        this.$modal.msgSuccess('修改成功');
      }).catch(() => {});
    },
    handleUpdateIndexProductContent() {
      updateHtmlContent({'indexProductContent':this.htmlcontent.indexProductContent}).then(() => {
        this.$modal.msgSuccess('修改成功');
      }).catch(() => {});
    },
    handleUpdateIndexNewsContent() {
      updateHtmlContent({'indexNewsContent':this.htmlcontent.indexNewsContent}).then(() => {
        this.$modal.msgSuccess('修改成功');
      }).catch(() => {});
    },
    handleUpdateIndexSolutionContent() {
      updateHtmlContent({'indexSolutionContent':this.htmlcontent.indexSolutionContent}).then(() => {
        this.$modal.msgSuccess('修改成功');
      }).catch(() => {});
    },
    handleUpdateIndexVideoContent() {
      updateHtmlContent({'indexVideoContent':this.htmlcontent.indexVideoContent}).then(() => {
        this.$modal.msgSuccess('修改成功');
      }).catch(() => {});
    },
    handleUpdateAdvantages() {
      updateHtmlContent({'advantages':this.htmlcontent.advantages}).then(() => {
        this.$modal.msgSuccess('修改成功');
      }).catch(() => {});
    },
    handleUpdateSaleServices() {
      updateHtmlContent({'saleServices':this.htmlcontent.saleServices}).then(() => {
        this.$modal.msgSuccess('修改成功');
      }).catch(() => {});
    },
    refreshHtmlContent() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
.card{
  min-height: calc(100vh - 125px);
  overflow-y:auto  /* 开启滚动显示溢出内容 */
 }

.el-row {
  word-break: break-word;
  background-color: #f8f8f9;
  color: #515a6e;
  font-size: 13px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 0;
  margin-bottom: 10px;
}

img {
  max-width: 90%;
  height: auto;
}

</style>